import React from 'react'
import './index.css'

export default class Item extends React.Component {
  state = {
    mouseEnter: false
  }

  mouseState = flag => {
    this.setState({
      mouseEnter: flag
    })
  }

  handleChange = (id, event) => {
    this.props.changeTodo(id, event.target.checked)
  }

  handleDelete = id => {
    this.props.deleteTodo(id)
  }

  render() {
    const {mouseEnter} = this.state
    const {todo} = this.props
    return (
      <li onMouseEnter={() => this.mouseState(true)} onMouseLeave={() => this.mouseState(false)}>
        <label>
          <input type="checkbox" checked={todo.done} onChange={e => this.handleChange(todo.id, e)}/>
          <span>{todo.name}</span>
        </label>
        <button onClick={() => this.handleDelete(todo.id)} className="btn btn-danger" style={{display: mouseEnter ? 'block' : 'none'}}>删除
        </button>
      </li>
    )
  }
}
